<template>
  <div class="app-container home">
    <div class="page-wrapper">
      <el-row :gutter="20" class="main-content">
        <el-col :span="24" class="text-center main-title">
          <h1>佐巴扬直升机学习平台</h1>
          <p class="sub-title">让学习成为一种习惯，让成长成为一种享受</p>
        </el-col>

        <!-- 文章卡片区域 -->
        <el-col :span="24">
          <el-row :gutter="20" class="card-container">
            <el-col :xs="24" :sm="12" :md="6">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span>学习的重要性</span>
                </div>
                <div class="card-content">
                  <i class="el-icon-reading card-icon"></i>
                  <p>学习是通向成功的阶梯，是开启智慧的钥匙。持续学习能够帮助我们适应快速变化的世界，获得个人成长和职业发展的机会。</p>
                  <el-button type="text" @click="readMore">阅读更多</el-button>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="12" :md="6">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span>学习技巧</span>
                </div>
                <div class="card-content">
                  <i class="el-icon-light-rain card-icon"></i>
                  <p>掌握正确的学习方法可以事半功倍。包括制定学习计划、专注力训练、记忆技巧、时间管理等实用技能。</p>
                  <el-button type="text" @click="readMore">阅读更多</el-button>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="12" :md="6">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span>学习的用途</span>
                </div>
                <div class="card-content">
                  <i class="el-icon-magic-stick card-icon"></i>
                  <p>学习不仅能提升专业技能，还能开拓视野、增强创新能力、提高解决问题的能力，为人生创造更多可能。</p>
                  <el-button type="text" @click="readMore">阅读更多</el-button>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="12" :md="6">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span>学习对自我成长的重要性</span>
                </div>
                <div class="card-content">
                  <i class="el-icon-sunrise card-icon"></i>
                  <p>自我成长离不开持续学习。通过学习，我们可以提升自信心、拓展思维方式、增强竞争力，实现自我价值。</p>
                  <el-button type="text" @click="readMore">阅读更多</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <!-- 欢迎弹窗 -->
      <el-dialog
        title="欢迎来到学习平台"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        center>
        <div class="welcome-content">
          <i class="el-icon-star-on welcome-icon"></i>
          <h3>欢迎使用学习平台！</h3>
          <p>这是一个致力于帮助用户提升学习能力、培养学习习惯的平台。</p>
          <ul>
            <li>了解科学的学习方法</li>
            <li>掌握高效的学习技巧</li>
            <li>培养良好的学习习惯</li>
            <li>实现自我能力提升</li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeWelcome">开始探索</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      dialogVisible: true
    }
  },
  methods: {
    closeWelcome() {
      this.dialogVisible = false
    },
    readMore() {
      this.$message({
        message: '更多内容正在建设中...',
        type: 'info'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  display: flex;
  justify-content: center;

  .page-wrapper {
    width: 100%;
    max-width: 1200px;
  }

  .main-content {
    width: 100%;
    margin: 0 auto;
  }

  .text-center {
    text-align: center;
  }

  .main-title {
    margin-bottom: 40px;
    
    h1 {
      font-size: 36px;
      color: #303133;
      margin-bottom: 10px;
    }

    .sub-title {
      font-size: 18px;
      color: #909399;
    }
  }

  .card-container {
    margin-bottom: 20px;
  }

  .box-card {
    height: 100%;
    margin-bottom: 20px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      text-align: center;
      padding: 20px 0;

      .card-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 20px;
      }

      p {
        color: #606266;
        line-height: 1.8;
        margin-bottom: 20px;
        min-height: 80px;
      }
    }
  }
}

.welcome-content {
  text-align: center;
  padding: 20px 0;

  .welcome-icon {
    font-size: 48px;
    color: #409EFF;
    margin-bottom: 20px;
  }

  h3 {
    color: #303133;
    margin-bottom: 15px;
  }

  p {
    color: #606266;
    margin-bottom: 15px;
  }

  ul {
    text-align: left;
    color: #606266;
    padding-left: 20px;
    
    li {
      line-height: 2;
    }
  }
}

::v-deep .el-dialog {
  border-radius: 8px;
  
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #EBEEF5;
  }
  
  .el-dialog__body {
    padding: 30px 20px;
  }
  
  .el-dialog__footer {
    border-top: 1px solid #EBEEF5;
    padding: 15px;
  }
}
</style>

